<template>
  <div>
    <el-main>
      <el-tabs v-model="activeName" @tab-click="TabsClick">
        <el-tab-pane label="知识产权创新担当企业" name="knowledge">
          <Tobeartabs @change='change' @getSearch='getSearch' @getVisit="getVisit" :tableData="tableData"></Tobeartabs>
        </el-tab-pane>
        <el-tab-pane label="新进知识产权企业" name="newknowledge">
          <Tobeartabs @change='change' @getSearch='getSearch' @getVisit="getVisit" :tableData="tableData"></Tobeartabs>
        </el-tab-pane>
        <el-tab-pane label="重点企业" name="keyknowledge">
          <Tobeartabs @change='change' @getSearch='getSearch' @getVisit="getVisit" :tableData="tableData"></Tobeartabs>
        </el-tab-pane>
      </el-tabs>
      <div class="pagination" style="margin-top: 30px;">
        <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
          layout="total, prev, pager, next, jumper" :total="Number(count)" align="left"></el-pagination>
      </div>
    </el-main>
  </div>
</template>

<script>
import Tobeartabs from './components/Tobeartabs.vue';
import { dataList } from '@/api/newuser'

export default {
  data() {
    return {
      search: '',
      activeName: 'knowledge',
      tableData:
      {
        date: [null, null],
        list: []
      },
      type: this.$route.query.type,
      status: 0,
      page: 1,
      limit: 10,
      count: 0,
      company:'',
      street_type:null,
    };
  },
  components: { Tobeartabs },
  //监听路由中参数变化
  watch: {
    '$route'(to, from) {
      this.dataList()
    }
  },
  mounted() {
    if (this.$route.query.type == 1) {
      this.activeName = 'keyknowledge'
    } else if (this.$route.query.type == 2) {
      this.activeName = 'knowledge'
    } else if (this.$route.query.type == 3) {
      this.activeName = 'newknowledge'
    }
    this.dataList()
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val
      this.dataList()
    },
    getSearch(status) {
      // console.log(status);
      if (status) {
        this.status = status
      } else {
        this.status = 0
      }
      this.dataList()
    },
    getVisit(street_id) {
      if (street_id) {
        this.street_type = street_id
      } else {
        this.street_type = null
      }
      // console.log( this.street_type);
      this.dataList()
    },
    dataList() {
      dataList({
        type: this.type,
        status: this.status,
        page: this.page,
        limit: this.limit,
        company:this.company,
        street_type: this.street_type,
      }).then(res => {
        this.count = res.count
        this.tableData = res
      })
    },
    change(search){
      this.company = search
      this.dataList()
    },
    handleClick(row) {
    },
    TabsClick(el) {
      if (el.label == '知识产权创新担当企业') {
        this.type = '2';
      } else if (el.label == '新进知识产权企业') {
        this.type = '3';
      } else if (el.label == '重点企业') {
        this.type = '1';
      }
      this.page = 1

      this.$router.replace(
        {
          path: '/workTobear',
          query: {
            type: this.type
          }
        }
      )
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .el-tabs__item {
  padding: 0 62px;
  /*color: #3377FF;*/
  font-size: 16px;
}

::v-deep input {
  border-radius: 30px;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
}

::v-deep .el-input__icon {
  line-height: 38px;
  font-size: 16px;
}

.dc_b {
  padding: 7px 40px;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
}

.table_c {
  margin-top: 15px;
}

::v-deep .has-gutter tr th {
  font-size: 14px;
  font-weight: initial;
  color: #334681;
}

::v-deep .has-gutter tr th:nth-child(1),
::v-deep .has-gutter tr th:nth-child(3),
::v-deep .has-gutter tr th:nth-child(5),
::v-deep .has-gutter tr th:nth-child(6),
::v-deep .el-table__row td:nth-child(1),
::v-deep .el-table__row td:nth-child(3),
::v-deep .el-table__row td:nth-child(5),
::v-deep .el-table__row td:nth-child(6) {
  text-align: center;
}

::v-deep .has-gutter tr th:nth-child(11) {
  text-align: center;
}

// :v-deep .has-gutter tr th:last-child {
//   text-align: center;
// }
::v-deep .el-table__row td {
  color: #334681;
  font-size: 14px;
}

.pj_div {
  color: #fff;
  background-color: #ff5f55;
  padding: 4px;
  border-radius: 5px;
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
